<template>
  <div class="DataView">
    <!-- 首行-条件选择 -->
    <div class="flexbox" style="margin-top: calc((100vw - 80px) * 0.01)">
      <div class="databox box-shadow" style="width: 97.5%; display: flex">
        <a-cascader
          :show-search="{ filter }"
          :options="analyticsData.city_area_community"
          :load-data="loadData"
          placeholder="请选择"
          @change="onChange"
        />
      </div>
    </div>
    <!-- 第一行 -->
    <div class="flexbox" style="margin-top: calc((100vw - 80px) * 0.01)">
      <div class="databox box-shadow" style="width: 97.5%">
        <h2 style="font-weight: 600; color: rgb(51, 51, 51); display: flex">
          区县-平均价格
        </h2>
        <p class="mb-0 flex">重庆市各区县平均价格排名</p>
        <apex-chart
          width="100%"
          height="300"
          :options="analyticsData.area_avg_price.chartOptions"
          type="bar"
          :series="analyticsData.area_avg_price.series"
        ></apex-chart>
      </div>
    </div>
    <!-- 第二行 -->
    <div class="flexbox" style="margin-top: calc((100vw - 80px) * 0.01)">
      <div
        v-if="house_orientation.chartOptions"
        class="databox box-shadow"
        style="width: 48%; height: auto"
      >
        <h2 style="font-weight: 600; color: rgb(51, 51, 51); display: flex">
          房屋朝向分布
        </h2>
        <p class="mb-0 flex">该项数据只统计区县内某一区域的房屋朝向</p>
        <div>
          <apex-chart
            height="300"
            :options="house_orientation.chartOptions"
            type="pie"
            :series="house_orientation.series"
          />
        </div>
      </div>
      <div
        v-if="house_avg_mj.chartOptions"
        class="databox box-shadow"
        style="width: 48%; height: auto"
      >
        <h2 style="font-weight: 600; color: rgb(51, 51, 51); display: flex">
          平均面积分布
        </h2>
        <p class="mb-0 flex">该项数据只统计区县内某一区域的房屋平均面积</p>
        <div>
          <apex-chart
            type="bar"
            height="300"
            :options="house_avg_mj.chartOptions"
            :series="house_avg_mj.series"
          />
        </div>
      </div>
    </div>
    <!-- 第三行 -->
    <div class="flexbox" style="margin-top: calc((100vw - 80px) * 0.01)">
      <div
        v-if="house_type.chartOptions"
        class="databox box-shadow"
        style="width: 48%; height: auto"
      >
        <h2 style="font-weight: 600; color: rgb(51, 51, 51); display: flex">
          户型分布
        </h2>
        <p class="mb-0 flex">该项数据只统计区县内某一区域的户型</p>
        <div>
          <apex-chart
            height="300"
            :options="house_type.chartOptions"
            type="pie"
            :series="house_type.series"
          />
        </div>
      </div>
      <div
        v-if="house_zxqk.chartOptions"
        class="databox box-shadow"
        style="width: 48%; height: auto"
      >
        <h2 style="font-weight: 600; color: rgb(51, 51, 51); display: flex">
          装修情况分布
        </h2>
        <p class="mb-0 flex">该项数据只统计区县内某一区域的装修情况</p>
        <div>
          <apex-chart
            height="300"
            :options="house_zxqk.chartOptions"
            type="pie"
            :series="house_zxqk.series"
          />
        </div>
      </div>
    </div>
    <!-- 第四行 -->
    <div
      v-if="house_xq_score.chartOptions"
      class="flexbox"
      style="margin-top: calc((100vw - 80px) * 0.01)"
    >
      <div class="databox box-shadow" style="width: 97.5%">
        <h2 style="font-weight: 600; color: rgb(51, 51, 51); display: flex">
          小区-评分
        </h2>
        <p class="mb-0 flex">该区域内所有小区的评分（满分为10.0分）</p>
        <apex-chart
          width="100%"
          height="300"
          :options="house_xq_score.chartOptions"
          type="bar"
          :series="house_xq_score.series"
        ></apex-chart>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
const base = process.env.NODE_ENV === "development" ? "/api" : "";
import analyticsData from "./data/analyticsData.js";
import { apex_pie, apex_bar } from "./functions/generalFunction.js";
export default {
  data() {
    return {
      analyticsData: analyticsData,
      house_orientation: {},
      house_avg_mj: {},
      house_type: {},
      house_zxqk: {},
      house_xq_score: {},
    };
  },
  mounted() {
    // this.showareaavgpricebar();
    window.storeChangeRc = this.storeChangeRc;
  },
  methods: {
    // 展示横向折线图
    showareaavgpricebar() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(
        document.getElementById("horizontalCharts3")
      ); //也可以通过$refs.newCharts的方式去获取到dom实例。
      var option = analyticsData.echarts_area_avg_price;

      option && myChart.setOption(option);
    },
    onChange(value) {
      console.log("区县:", value[0]);
      console.log("区域:", value[1]);
      console.log("小区:", value[2]);
      axios({
        method: "post",
        url: base + "analyze_area",
        data: {
          city: value[0],
          area: value[1],
          //   comm: value[2],
        },
        headers: { "content-type": "application/x-www-form-urlencoded" },
      })
        .then((response) => {
          console.log(response.data.data); // 打印成功的结果
          this.house_orientation = apex_pie(
            response.data.data.house_orientation.series,
            response.data.data.house_orientation.labels
          );
          this.house_avg_mj = apex_bar(
            response.data.data.mj_list.series,
            response.data.data.mj_list.labels,
            "平均面积"
          );
          this.house_type = apex_pie(
            response.data.data.fx_list.series,
            response.data.data.fx_list.labels
          );
          this.house_zxqk = apex_pie(
            response.data.data.zxqk_list.series,
            response.data.data.zxqk_list.labels
          );
          this.house_xq_score = apex_bar(
            response.data.data.xq_score_list.series,
            response.data.data.xq_score_list.labels,
            "评分"
          );
        })
        .catch(function (error) {
          console.log(error); // 打印失败的结果
        });
    },
    loadData(selectedOptions) {
      const targetOption = selectedOptions[selectedOptions.length - 1];
      targetOption.loading = true;

      // load options lazily
      setTimeout(() => {
        targetOption.loading = false;
        targetOption.children = [
          {
            label: `${targetOption.label} Dynamic 1`,
            value: "dynamic1",
          },
          {
            label: `${targetOption.label} Dynamic 2`,
            value: "dynamic2",
          },
        ];
        this.options = [...this.options];
      }, 1000);
    },
    filter(inputValue, path) {
      return path.some(
        (option) =>
          option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1
      );
    },
  },
};
</script>

<style scoped>
.DataView {
  flex: 1;
  background-color: #f6f6f7;
  height: 100vh;
  overflow-y: auto;
}
.ant-cascader-picker:focus .ant-cascader-input {
  border-color: #887ef2 !important;
  /* border-right-width: 1px !important; */
  /* outline: 0; */
  box-shadow: 0 0 0 2px rgba(86, 24, 255, 0.2) !important;
}
</style>
